<template>
  <el-row class="contract_base_title">{{ props.itemInfo?.title }}</el-row>
  <div class="form-list">
    <template v-for="(item, index) in props.itemInfo.formTemplateFieldVOList" :key="index">
      <div class="item" v-if="item.visableDetailFlag && item.status && item.displayPage.includes('PREVIEW_PAGE')">
        <div class="label">{{ item.customName }}：</div>
        <div class="value">
          <el-popover
            :placement="props.list[item.fieldCode]?.length <= 100 && item.fieldTypeCode != 'FILE_UPLOAD' ? 'top-start' : 'bottom-start'"
            :width="item.fieldTypeCode != 'FILE_UPLOAD' ? 260 : ''"
            trigger="hover"
            v-if="
              (props.list[item.fieldCode]?.length > 10 || props.list[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')]?.length > 10) &&
                item.presetFlag &&
                item.fieldTypeCode != 'CURRENCY'
            "
            :content="
              item.fieldTypeCode != 'FILE_UPLOAD'
                ? props.list[item.fieldCode] && item.fieldTypeCode === 'CURRENCY'
                  ? '￥'
                  : '' +
                    (isPlainObject(props.list[item.fieldCode]) && props.list[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')]
                      ? props.list[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')]
                      : props.list[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')] && !isPlainObject(props.list[item.fieldCode])
                      ? props.list[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')]
                      : props.list[item.fieldCode] !== 0 &&
                        !isPlainObject(props.list[item.fieldCode]) &&
                        props.list[item.fieldCode] &&
                        item.fieldTypeCode != 'FILE_UPLOAD'
                      ? props.list[item.fieldCode]
                      : props.list[item.fieldCode] !== 0 &&
                        !isPlainObject(props.list[item.fieldCode]) &&
                        props.list[item.fieldCode] &&
                        item.fieldTypeCode == 'FILE_UPLOAD'
                      ? fileName
                      : props.list[item.fieldCode] === 0
                      ? props.list[item.fieldCode]
                      : '') +
                    (item.fieldTypeCode == 'PERCENT' && item.fieldCode != 'taxRate' ? '%' : '')
                : ''
            "
          >
            <template v-slot="{ content }" v-if="item.fieldTypeCode == 'FILE_UPLOAD'">
              <template v-if="props.list[item.fieldCode] && props.list[item.fieldCode + 'List'].length > 0">
                <a
                  class="fileItem"
                  v-for="(upItem, upIndex) in props.list[item.fieldCode + 'List']"
                  :key="upIndex"
                  :href="upItem.url"
                  target="_blank"
                >
                  <el-button type="primary" link>{{ upItem.fileName }}</el-button>
                </a>
              </template>
              <template v-else>
                --
              </template>
            </template>
            <template #reference>
              {{ props.list[item.fieldCode] && item.fieldTypeCode === 'CURRENCY' ? '￥' : '' }}
              {{
                (isPlainObject(props.list[item.fieldCode]) && props.list[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')]
                  ? props.list[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')]
                  : props.list[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')] && !isPlainObject(props.list[item.fieldCode])
                  ? props.list[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')]
                  : props.list[item.fieldCode] !== 0 &&
                    !isPlainObject(props.list[item.fieldCode]) &&
                    props.list[item.fieldCode] &&
                    item.fieldTypeCode != 'FILE_UPLOAD'
                  ? props.list[item.fieldCode]
                  : props.list[item.fieldCode] !== 0 &&
                    !isPlainObject(props.list[item.fieldCode]) &&
                    props.list[item.fieldCode] &&
                    item.fieldTypeCode == 'FILE_UPLOAD'
                  ? props.list[item.fieldCode + 'List'].length
                    ? '查看(' + props.list[item.fieldCode + 'List'].length + ')'
                    : '--'
                  : props.list[item.fieldCode] === 0
                  ? props.list[item.fieldCode]
                  : '--') +
                  ((props.list[item.fieldCode] || props.list[item.fieldCode] == 0) && item.fieldTypeCode == 'PERCENT' && item.fieldCode != 'taxRate'
                    ? '%'
                    : '')
              }}
            </template>
          </el-popover>
          <template v-else>
            <!-- 预制字段 -->
            <template v-if="item.presetFlag">
              {{ props.list[item.fieldCode] && item.fieldTypeCode === 'CURRENCY' ? '￥' : '' }}
              {{
                (isPlainObject(props.list[item.fieldCode]) && props.list[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')]
                  ? props.list[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')]
                  : props.list[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')] && !isPlainObject(props.list[item.fieldCode])
                  ? props.list[item.fieldCode + (item?.lovTypeCode == 'URL' ? 'Name' : 'Cn')]
                  : props.list[item.fieldCode] !== 0 && !isPlainObject(props.list[item.fieldCode]) && props.list[item.fieldCode]
                  ? props.list[item.fieldCode]
                  : props.list[item.fieldCode] === 0
                  ? props.list[item.fieldCode]
                  : '--') +
                  ((props.list[item.fieldCode] || props.list[item.fieldCode] == 0) && item.fieldTypeCode == 'PERCENT' && item.fieldCode != 'taxRate'
                    ? '%'
                    : '')
              }}
            </template>
            <!-- 自定义字段 -->
            <!-- <template v-else>
              <template v-if="props.list.extendMap[item.fieldCode]?.dataType === 'FILE_UPLOAD'">
                <div style="display:none">
                  {{ getFileDir(item.fieldCode, props.list.extendMap[item.fieldCode]?.name) }}
                </div>
                <el-popover placement="top-start" :width="200" trigger="hover" v-if="fileList?.length">
                  <template v-for="(v, i) in fileList" :key="i">
                    {{ v[item.fieldCode].object }}
                  </template>
                  <template #reference>
                    <template v-for="(v, i) in fileList" :key="i">
                      <el-link
                        :href="v[item.fieldCode].url + (v[item.fieldCode].url.indexOf('?') != -1 ? '&' : '?') + 'access_token=' + getAccessToken()"
                        type="primary"
                        target="_blank"
                        >{{ v[item.fieldCode].object || '--' }}</el-link
                      >
                    </template>
                  </template>
                </el-popover>
              </template>
              <template v-else>
                {{ props.list.extendMap[item.fieldCode]?.name }}
              </template>
            </template> -->
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getFileguidApi } from 'api/common'
import { getAccessToken } from 'utils/headerToken'
import { ERR_OK } from 'config/statusCode'
import { useI18n } from 'vue-i18n'
import { dateUtil } from 'utils/dateUtil'
const { t } = useI18n() // 中英文
const props = defineProps({
  list: {
    type: Object,
    default: () => {}
  },
  itemInfo: {
    type: Object,
    default: () => {}
  }
})
console.log(props.list, '表单返回的头数据')
// console.log(props.itemInfo)

const dateList = ref([])
props.itemInfo.formTemplateFieldVOList.forEach((item) => {
  if (item.fieldTypeCode == 'DATE') {
    dateList.value.push(item.fieldCode)
  }
})
dateList.value.forEach((key) => {
  if (key in props.list) {
    props.list[key] = props.list[key] ? dateUtil(props.list[key]).format('YYYY-MM-DD') : ''
  }
})

const isPlainObject = (val) => {
  return val instanceof Object
}

const fileList = ref([])
const getFileDir = async (key, dir) => {
  for (let i = 0; i < fileList.value.length; i++) {
    if (fileList.value[i].hasOwnProperty(key)) {
      return
    }
  }
  // 根据目录名dir 获取文件列表
  const { code, data } = await getFileguidApi(dir)
  if (code === ERR_OK) {
    data.map((item) => {
      fileList.value.push({ [key]: item.url })
    })
  }
}

const fileName = ref()
const getInfoFileDir = async (dir, key) => {
  // 根据目录名dir 获取文件列表
  if (!dir) return
  const { code, data } = await getFileguidApi(dir?.split(','))
  if (code === ERR_OK) {
    if (data.length > 0) {
      props.list[key + 'List'] = data || []
      let list = []
      data.forEach((item) => {
        item.guid ? list.push(item.guid) : ''
      })
      fileName.value = list.join()
    } else {
      fileName.value = '--'
    }
  }
  attachment
}
props.itemInfo.formTemplateFieldVOList.forEach((item) => {
  if (item.fieldTypeCode == 'FILE_UPLOAD') {
    getInfoFileDir(props.list[item.fieldCode], item.fieldCode)
  }
})
</script>

<style lang="scss" scoped>
.form-list {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: calc(100% / 3 - 10px);
    display: flex;
    margin-bottom: 8px;
    margin-right: 10px;
    .label {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 22px;
      width: 120px;
    }
    .value {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
      margin-left: 12px;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //用省略号显示
      white-space: nowrap; //不换行
      flex: 1;
      cursor: pointer;
    }
  }
}
.fileItem {
  width: 100%;
  display: block;
  justify-content: space-between;
  line-height: 26px;
  align-items: center;
  padding: 0 4px;
}
</style>
